<template>
	<div class="container">
		<div class="table">
			<el-table :data="tableData" style="width: 100%">
			    <el-table-column
			      prop="date"
			      label="日期"
			      width="180"
			      :filters="[{text: '2016-05-01', value: '2016-05-01'}, {text: '2016-05-02', value: '2016-05-02'}, {text: '2016-05-03', value: '2016-05-03'}, {text: '2016-05-04', value: '2016-05-04'}]"
			      :filter-method="filterHandler"
			    >
			    </el-table-column>
			    <el-table-column
			      prop="name"
			      label="姓名"
			      width="180">
			    </el-table-column>
			    <el-table-column
			      prop="address"
			      label="地址"
			      :formatter="formatter">
			    </el-table-column>
			    <el-table-column
			      prop="tag"
			      label="标签"
			      width="100"
			      :filters="[{ text: '家', value: '家' }, { text: '公司', value: '公司' }]"
			      :filter-method="filterTag"
			      filter-placement="bottom-end">
			      <template slot-scope="scope">
			        <el-tag
			          :type="scope.row.tag === '家' ? 'primary' : 'success'"
			          close-transition>{{scope.row.tag}}</el-tag>
			      </template>
			    </el-table-column>
  			</el-table>
		</div>
	</div>
</template>
<style type="text/css" lang="scss">
	.container{
		background-color:#fff;
		position: absolute;
		bottom:20px;
		top:50px;
		right:20px;
		left:20px;
		.table{
			margin:20px;
		}
	}
</style>
<script type="text/javascript">
	export default{
		data() {
      return {
        tableData: [{
          date: '2016-05-02',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1518 弄',
          tag: '家'
        }, {
          date: '2016-05-04',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1517 弄',
          tag: '公司'
        }, {
          date: '2016-05-01',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1519 弄',
          tag: '家'
        }, {
          date: '2016-05-03',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1516 弄',
          tag: '公司'
        }]
      }
    },
    methods: {
      formatter(row, column) {
        return row.address;
      },
      filterTag(value, row) {
        return row.tag === value;
      },
      filterHandler(value, row, column) {
        const property = column['property'];
        return row[property] === value;
      }
    }
	}
</script>